<template>
  <f7-page class="bg-color-white">
    <f7-navbar :title="$t('m.pd1')" back-link=" "></f7-navbar>
    <img :src="details.pic" onerror="onerror=null;src='../static/avatar.jpg'" alt="">
    <div class="product-info">
      <h3>{{details.name}}</h3>
      <h2>{{details.price}} {{$t('m.m2')}}</h2>
<!--      <p>{{(details.price / zolPrice).toFixed(2)}} ZOL</p>-->

      <div class="intro-box" v-html="details.desc || $t('m.pd3')">
      </div>
    </div>

    <f7-toolbar bottom class="bottom-buttons-toolbar">
      <f7-button fill class="no-border-radius" @click="toConfirmOrder">{{$t('m.pd2')}}</f7-button>
    </f7-toolbar>
  </f7-page>
</template>

<script>
  import { getGoodDetails } from "../api/find";

  export default {
    name: "product-details",
    data() {
      return {
        details: {}
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        getGoodDetails({good_id: this.$f7route.query.id }).then(res => {
          this.details = res.data;
        })
      },
      toConfirmOrder() {
        this.$f7router.navigate('/config-order/', {context: {good: this.details}})
      }
    }
  }
</script>

<style scoped lang="scss">
  .product-info {
    padding: $padding;
    h3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      color: $mainColor2;
      font-size: 28px;
    }
    h2 {
      color: $mainColor;
    }
    p {
      color: $colorGrey;
    }
    .intro-box {
      border-top: 1px solid $colorGrey;
      padding-top: $padding;
      margin-top: $padding;
    }
  }

</style>
